<template>
	<div>
		<Card>
			<Collapse style="margin-bottom:15px;">
				<Panel>查询
					<div slot="content">
						<Form ref="formLkyStudent" :model="formLkyStudent" label-position="right" :label-width="80" inline>
							<!--学院、专业、班级查询-->
							<FormItem label="所属学院" prop="name1">
							  <Select v-model="coid" style="width:200px"  @on-open-change="onOpenChangeCollege" @on-change="onOpenChangeMajor" clearable >
							    <Option v-for="item in collegeList" :value="item.id" :key="item.id">
							      {{ item.name }}
							    </Option>
							  </Select>
							</FormItem>
							<FormItem label="所属专业" prop="name2">
							  <Select v-model="mid" style="width:200px"  @on-change="onOpenFindClassByMid" clearable >
							    <Option v-for="item in majorList" :value="item.id" :key="item.id">
							      {{ item.name }}
							    </Option>
							  </Select>
							</FormItem>
							<FormItem label="所属班级" prop="name3">
							  <Select v-model="cid"   style="width:200px" clearable >
							    <Option v-for="item in classList" :value="item.id" :key="item.id">
							      {{ item.name }}
							    </Option>
							  </Select>
								</FormItem>
									<Button type="primary" @click="handleSubmit('formLkyStudent')">查询</Button>
									<Button @click="handleReset('formLkyStudent')" style="margin-left: 8px">重置</Button>
								</FormItem>
							</FormItem>
						</Form>
					</div>
				</Panel>
			</Collapse>

			<Table ref="tableLkyStudent" :data="tableData" :columns="columns" @on-selection-change="onSelectionChange"
			 @on-sort-change="onSortChange" @on-row-click="onRowClick" />
			<div style="margin: 10px;overflow: hidden">
				<div style="float: right;">
					<Page :total="total" :current="current" :page-size="pageSize" @on-page-size-change="changePageSize" @on-change="changePage"
					 :show-total="true" show-sizer></Page>
				</div>
			</div>
		</Card>
	</div>
</template>

<script>
import {
  list, StudentActivateAll, updateStatus
} from '@/api/lky/lkyStudent'
import {
  createFormObj, createModelObj, getToken
} from '@/libs/util'
// 学院查询、专业、班级查询
import { queryAll } from '@/api/lky/lkyCollege'
import { queryAllM } from '@/api/lky/lkyMajor'
import { queryFindClassByMid } from '@/api/lky/lkyClass'
import Add from './add.vue'
import Edit from './edit.vue'

export default {
  name: 'LkyStudent',
  components: {
    Add,
    Edit
  },
  data () {
    return {
      ID: '',
      lkyStudentStatus: {
        ID: '',
        student_number: ''
      },
      formLkyStudent: {

        USER_NAME: '',
        c_id: ''
      },

      columns: [{
        type: 'selection',
        width: 60,
        align: 'center'
      },
      {
        key: 'USER_NAME',
        title: '学生',
        sortable: true
      },
      {
        key: 'student_number',
        title: '学号',
        sortable: true
      },
			{
			  key: 'name',
			  title: '班级',
			  sortable: true
			},
			
			{
			  key: 'name1',
			  title: '专业',
			  sortable: true
			},
			
      {
        key: 'name2',
        title: '学院',
        sortable: true
      },

      {
        key: 'creation_time',
        title: '创建时间',
        sortable: true
      },

      {
        title: '操作',
        key: 'action',
        width: 250,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h(
              'Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },

                on: {
                  click: () => {
                    console.log(params.row)
                    this.show(params.row)
                  }
                }
              },
              '详细信息'
            ),

            h(
              'Button', {
                props: {
				  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                     console.log(params.row.ID)
                     this.ID = params.row.ID
                     updateStatus({ 'ID': this.ID }).then(res => {
                         if (res) {
                           this.getLkyStudentList(this.current, this.pageSize)
                         }
                       }
                     )
                  }
                }
              },
              '激活'
            )
          ])
        }
      }
      ],
      tableData: [],
      total: 0,
      current: 1,
      pageSize: 10,
      isOpenAddPage: false,
      isOpenEditPage: false,
      editLkyStudent: {},
      selection: [],
      // 创建容器
      coid: '',
      mid: '',
      cid: '',
      collegeList: [],
      majorList: [],
      classList: []
    }
  },
  methods: {
    onOpenChangeCollege () {
			  queryAll().then(res => {
			    this.collegeList = res.data
			  })
    },
    onOpenChangeMajor (coid) {
      this.cid = ''
      this.mid = ''
			  queryAllM({ 'coid': this.coid }).then(res => {
			    this.majorList = JSON.parse(JSON.stringify(res.data))
			  })
    },
    onOpenFindClassByMid (mid) {
			  queryFindClassByMid({ 'mid': this.mid }).then(res => {
			    this.classList = JSON.parse(JSON.stringify(res.data))
			  })
    },
    show (row) {
      // 打开页面事件(添加页,编辑页...)
      console.log(row)
      this.$Modal.info({

        content:
					 `<h1>学生详细信息</h1><br>
					 <h2>姓名：${row.USER_NAME}</h2>
					  <h2>性别:${row.sex}</h2>
					   <h2>班级：${row.name}</h2>
					  <h2>专业：${row.name1}</h2>
					  <h2>学院：${row.name2}</h2>
					  <h2>学号：${row.student_number}</h2> 
					  <h2>手机号：${row.telphone}</h2>
					  <h2>籍贯：${row.native_place}</h2>
					  <h2>现居住地：${row.now_place}</h2>
					  `

      })
    },
    onRowClick (row) {
      this.id = row.id
    },
    handleSubmit (name) {
      // 查询按钮事件
      this.getLkyStudentList(this.current, this.pageSize)
      this.$Message.success('Success!')
    },
    handleReset (name) {
      this.coid = ''
      this.mid = ''
      this.cid = ''
      // 重置按钮事件
      this.$refs[name].resetFields()
    },
    handleOpenPage (name) {
      // 打开页面事件(添加页,编辑页...)
      if (name === 'add') this.isOpenAddPage = true

      else if (name === 'edit') {
        this.isOpenEditPage = true
      }
    },
    addLkyStudent (row) {
      this.tableData.push(row)
    },
    updateLkyStudent (row) {
      this.$set(this.tableData, row._index, row)
    },
    batchDelete () {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确定删除吗?</p>',
        onOk: () => {
          if (this.selection.length > 0) {
            let ids = ''
            for (var i = 0; i < this.selection.length; i++) {
              ids += ',' + this.selection[i].id
            }
            batchDelete({
              ids: ids
            }).then(res => {
              for (var i = 0; i < this.selection.length; i++) {
                this.tableData = this.tableData.filter(
                  item => item.id !== this.selection[i].id
                )
              }
            })
          } else {
            this.$Message.error('未选中记录!')
          }
        },
        onCancel: () => {}
      })
    },
    getLkyStudentList (current, pageSize, paras) {
      let para = {
        pageNumber: current,
        pageSize: pageSize
      }
      if (paras) Object.assign(para, paras)
      // key-value放入传入后端
      Object.assign(para, { tid: this.tid, coid: this.coid, mid: this.mid, cid: this.cid, uid: getToken() })
      StudentActivateAll(this.handleRequestParams(para)).then(res => {
        this.tableData = res.list
        this.current = parseInt(res.pageNumber)
        this.pageSize = parseInt(res.pageSize)
        this.total = parseInt(res.totalRow)
      })
    },
    handleRequestParams (para) {
      Object.assign(para, createFormObj(this.formLkyStudent, 'lkyStudent'))
      return para
    },
    exportExcel () {
      this.$refs.tableLkyStudent.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      })
    },
    changePage (pageNumber) {
      this.getLkyStudentList(pageNumber, this.pageSize)
    },
    changePageSize (pageSize) {
      this.getLkyStudentList(this.current, pageSize)
    },
    remove (index) {
      this.data6.splice(index, 1)
    },
    onSelectionChange (selection) {
      this.selection = selection
    },
    onSortChange (obj) {
      if (obj.order === 'normal') {
        this.getLkyStudentList(1, this.pageSize)
      } else {
        this.getLkyStudentList(1, this.pageSize, {
          field: obj.key,
          order: obj.order
        })
      }
    }
  },
  mounted () {
    this.getLkyStudentList(this.current, this.pageSize)
  }
}
</script>

<style>
</style>
